<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>

    <!-- 微信分享meta标签 -->
    <meta property="og:title" content="{{shareData.title}}">
    <meta property="og:description" content="{{shareData.description}}">
    <meta property="og:image" content="{{shareData.image}}">
    <meta property="og:url" content="{{shareData.url}}">
    <meta name="twitter:card" content="summary_large_image">

    <!-- 百度统计 -->
    <script src="/apps/js/baidu-tongji-mtx.js"></script>

    <!-- Bootstrap 5 CSS -->
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="/apps/css/all.min.css" rel="stylesheet">

    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .card-container {
            max-width: 414px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .card-section {
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .name {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .position {
            font-size: 16px;
            color: #666;
            margin-bottom: 20px;
        }

        .org-logo {
            width: 80px;
            height: 80px;
            object-fit: contain;
            margin-bottom: 15px;
        }

        .org-name {
            font-size: 18px;
            color: #333;
            margin-bottom: 20px;
        }

        .signature {
            max-width: 200px;
            max-height: 80px;
            object-fit: contain;
            margin: 20px 0;
        }

        .tags {
            margin: 20px 0;
        }

        .tag {
            display: inline-block;
            background: #f8f9fa;
            color: #666;
            padding: 8px 16px;
            margin: 4px;
            border-radius: 20px;
            font-size: 14px;
            border: 1px solid #e9ecef;
        }

        .contact-info {
            margin: 30px 0;
        }

        .contact-item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 10px;
        }

        .contact-icon {
            width: 20px;
            margin-right: 10px;
            color: #007bff;
        }

        .contact-text {
            color: #333;
            text-decoration: none;
        }

        .org-intro {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            text-align: left;
        }

        .org-detail {
            display: none;
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            text-align: left;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .show-detail {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px 0;
        }

        .wechat-qr {
            width: 120px;
            height: 120px;
            margin: 20px auto;
        }

        .promo-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 20px;
            text-align: center;
        }

        .promo-title {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .promo-desc {
            font-size: 16px;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .create-btn {
            background: white;
            color: #667eea;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 16px;
            font-weight: bold;
            text-decoration: none;
            display: inline-block;
            margin: 10px;
        }

        .swipe-indicator {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255,255,255,0.7);
            font-size: 14px;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
            40% { transform: translateX(-50%) translateY(-10px); }
            60% { transform: translateX(-50%) translateY(-5px); }
        }

        .section-indicator {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .indicator-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            cursor: pointer;
        }

        .indicator-dot.active {
            background: white;
        }
    </style>
</head>
<body>
    <div class="card-container">
        <!-- 名片主页 -->
        <div class="card-section" id="section1">
            {{#if card.avatar}}
            <img src="{{card.avatar}}" alt="头像" class="avatar">
            {{else}}
            <div class="avatar" style="background: #ddd; display: flex; align-items: center; justify-content: center; color: #999;">
                <i class="fas fa-user" style="font-size: 40px;"></i>
            </div>
            {{/if}}

            <div class="name">{{card.name}}</div>
            <div class="position">{{card.position}}</div>

            {{#if card.org_logo}}
            <img src="{{card.org_logo}}" alt="公司logo" class="org-logo">
            {{/if}}

            <div class="org-name">{{card.org_name}}</div>

            {{#if card.signature}}
            <img src="{{card.signature}}" alt="签名" class="signature">
            {{/if}}

            {{#if card.tags}}
            <div class="tags">
                {{#each card.tags}}
                <span class="tag">{{this}}</span>
                {{/each}}
            </div>
            {{/if}}
        </div>

        <!-- 详细信息页 -->
        <div class="card-section" id="section2">
            <h3>联系方式</h3>

            <div class="contact-info">
                {{#if card.mobile}}
                <div class="contact-item">
                    <i class="fas fa-mobile-alt contact-icon"></i>
                    <a href="tel:{{card.mobile}}" class="contact-text">{{card.mobile}}</a>
                </div>
                {{/if}}

                {{#if card.phone}}
                <div class="contact-item">
                    <i class="fas fa-phone contact-icon"></i>
                    <a href="tel:{{card.phone}}" class="contact-text">{{card.phone}}</a>
                </div>
                {{/if}}

                {{#if card.email}}
                <div class="contact-item">
                    <i class="fas fa-envelope contact-icon"></i>
                    <a href="mailto:{{card.email}}" class="contact-text">{{card.email}}</a>
                </div>
                {{/if}}

                {{#if card.website}}
                <div class="contact-item">
                    <i class="fas fa-globe contact-icon"></i>
                    <a href="{{card.website}}" target="_blank" class="contact-text">{{card.website}}</a>
                </div>
                {{/if}}

                {{#if card.address}}
                <div class="contact-item">
                    <i class="fas fa-map-marker-alt contact-icon"></i>
                    {{#if card.geo}}
                    <a href="https://maps.google.com/?q={{card.geo.lat}},{{card.geo.lng}}" target="_blank" class="contact-text">{{card.address}}</a>
                    {{else}}
                    <span class="contact-text">{{card.address}}</span>
                    {{/if}}
                </div>
                {{/if}}

                {{#if card.wechat_qrcode}}
                <div class="contact-item">
                    <i class="fab fa-weixin contact-icon"></i>
                    <span class="contact-text">微信二维码</span>
                </div>
                <img src="{{card.wechat_qrcode}}" alt="微信二维码" class="wechat-qr">
                {{/if}}
            </div>

            {{#if card.org_intro}}
            <div class="org-intro">
                <h4>组织简介</h4>
                <p>{{card.org_intro}}</p>
                {{#if card.org_detail}}
                <button class="show-detail" onclick="toggleDetail()">查看详情</button>
                {{/if}}
            </div>
            {{/if}}

            {{#if card.org_detail}}
            <div class="org-detail" id="orgDetail">
                <h4>组织详情</h4>
                <p>{{card.org_detail}}</p>
                <button class="show-detail" onclick="toggleDetail()">收起详情</button>
            </div>
            {{/if}}
        </div>

        <!-- 宣传页 -->
        <div class="card-section promo-section" id="section3">
            <div class="promo-title">制作您的专属名片</div>
            <div class="promo-desc">创建专业的电子名片，展示您的个人品牌和联系方式</div>

            <a href="/apps/card/edit" class="create-btn">
                <i class="fas fa-plus"></i> 创建名片
            </a>

            <div style="margin-top: 40px;">
                <p style="font-size: 14px; opacity: 0.8;">
                    由图腾生命科学提供技术支持
                </p>
            </div>
        </div>

        <!-- 滑动提示 -->
        <div class="swipe-indicator">
            <i class="fas fa-chevron-up"></i> 向上滑动查看更多
        </div>

        <!-- 页面指示器 -->
        <div class="section-indicator">
            <div class="indicator-dot active" onclick="goToSection(1)"></div>
            <div class="indicator-dot" onclick="goToSection(2)"></div>
            <div class="indicator-dot" onclick="goToSection(3)"></div>
        </div>
    </div>

    <!-- 微信JS SDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
    <!-- Bootstrap JS -->
    <script src="/apps/js/bootstrap.bundle.min.js" defer></script>
    <!-- 微信客户端DOM -->
    <script src="/apps/js/wx-client-dom.js" defer></script>

    <script>
        let currentSection = 1;
        const sections = document.querySelectorAll('.card-section');
        const indicators = document.querySelectorAll('.indicator-dot');

        // 触摸滑动处理
        let startY = 0;
        let currentY = 0;

        document.addEventListener('touchstart', (e) => {
            startY = e.touches[0].clientY;
        });

        document.addEventListener('touchmove', (e) => {
            currentY = e.touches[0].clientY;
        });

        document.addEventListener('touchend', () => {
            const diff = startY - currentY;
            const threshold = 50;

            if (Math.abs(diff) > threshold) {
                if (diff > 0 && currentSection < sections.length) {
                    // 向上滑动
                    goToSection(currentSection + 1);
                } else if (diff < 0 && currentSection > 1) {
                    // 向下滑动
                    goToSection(currentSection - 1);
                }
            }
        });

        function goToSection(sectionNum) {
            if (sectionNum < 1 || sectionNum > sections.length) return;

            currentSection = sectionNum;

            // 更新指示器
            indicators.forEach((indicator, index) => {
                indicator.classList.toggle('active', index + 1 === sectionNum);
            });

            // 滚动到对应区域
            sections[sectionNum - 1].scrollIntoView({ behavior: 'smooth' });
        }

        function toggleDetail() {
            const detail = document.getElementById('orgDetail');
            if (detail) {
                detail.style.display = detail.style.display === 'none' ? 'block' : 'none';
            }
        }

        // 微信分享配置
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof wx !== 'undefined') {
                wx.config({
                    debug: false,
                    appId: '{{shareData.appId}}',
                    timestamp: '{{shareData.timestamp}}',
                    nonceStr: '{{shareData.nonceStr}}',
                    signature: '{{shareData.signature}}',
                    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
                });

                wx.ready(function() {
                    wx.updateAppMessageShareData({
                        title: '{{shareData.title}}',
                        desc: '{{shareData.description}}',
                        link: '{{shareData.url}}',
                        imgUrl: '{{shareData.image}}',
                        success: function() {
                            console.log('分享设置成功');
                        }
                    });

                    wx.updateTimelineShareData({
                        title: '{{shareData.title}}',
                        link: '{{shareData.url}}',
                        imgUrl: '{{shareData.image}}',
                        success: function() {
                            console.log('朋友圈分享设置成功');
                        }
                    });
                });
            }
        });
    </script>
</body>
</html>